<template>
  <div class='row'>
    <div class="col-4 overflow-hidden">
      <ul class=''>
        <li @click="val.show = val.show ? false: true" v-for="val, key in $store.state.tagList" :key="key" in class=" border-bottom bg-light ">
          <div class='d-flex justify-content-between align-items-center tag_name'>
            <div class='ms-2'>
              {{ val.name }}
            </div>
            <div class='me-1 d-flex'>
              <div class="me-2 badge  bg-info rounded-pill fst-italic tag">
                {{ $store.state.topoList.filter( item => item.tags.indexOf(val.name) >= 0).length }}
              </div>
              <div v-show='! val.show' class='el-icon-arrow-down'></div>
              <div v-show='val.show' class='el-icon-arrow-up'></div>
            </div>
          </div>
          <ul v-show='val.show' class='topo_name'>
            <li @mouseover="test(v.name)" v-for="v, k in $store.state.topoList.filter( item => item.tags.indexOf(val.name) >= 0)" :key="k"
              class='d-flex' :class="{active: hover}" @mouseenter="hover = true" @mouseleave="hover=false">
              {{ v.name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class='bg-dark col-7'>
      <img loading="lazy" class="" :src="$store.state.topoMap" alt="topo-map">
    </div>
  </div>
</template>

<script>
  import http from '@/utils/Http';
  export default {
    components: {},
    methods: {
      test: function (name) {
        this.$store.commit('switch_topoMap', name)
      }
    },
    data() {
      return {
        hover: false
      }
    },
    mounted() {
      // /topo/tag/api/list/
      http({
        url: '/topo/tag/api/list/',
        method: 'get',
      }).then((res) => {
        // var a = res.data
        // console.log(a)
        // res.data.forEach(element => {
        //   console.log(element.name)
        // });
        // console.log(res.data);
        res.data.forEach(function (item, index, input) {
          // input[index] = item.name
          input[index].show = false;
          // console.log(input[index].show)
        });
        this.$store.commit('update_tagList', res.data);
        // console.log(this.$store.state.tagList);
      }).catch((err) => {
        console.log(err)
      });
      // /topo/tag/api/list/
      http({
        url: '/topo/api/',
        method: 'get',
      }).then((res) => {
        this.$store.commit('update_topoList', res.data);
        console.log(this.$store.state.topoList);
        // this.$store.state.topoList.forEach(item => console.log(item.tags.length))
        // console.log(this.$store.state.topoList.filter(item => item.tags.indexOf('mpls') >= 0).length)
        // console.log(a01)
        // console.log(this.$store.state.topoList.filter((item) =>
        // item.tags.indexOf('NE5000')
        // item.tags.length > 2
        // ))
        // var arr01 = this.$store.state.topoList.filter(item => item.tags.length > 3)
        // console.log(arr01)
        // console.log(this.$store.state.topoList.filter(item => item.tags.length > 1))
      }).catch((err) => {
        console.log(err)
      })
    }
  }
</script>

<style scoped>
  li {
    list-style: none;
  }

  .topo_name {
    font-size: 0.5em;
  }

  .tag_name {
    background: azure;
  }

  img {
    max-width: 100%;
    max-height: auto;
  }

  .active {
    background: green;
  }
</style>
